<template>
  <div>
    <!-- router-view标签代表这块区域将用来显示路由配置里的组件,具体显示哪个根据url地址决定, 其实有点像vue基础部分的slot插槽 -->
    <router-view></router-view>
    <TabBar :currentHash="currentHash"></TabBar>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import TabBar from "./components/TabBar.vue";

const currentHash = ref(location.hash.slice(1));

onMounted(() => {
  console.log(location.hash.slice(1), 1111);
});
window.addEventListener("hashchange", (e) => {
  currentHash.value = e.newURL.split("#")[e.newURL.split("#").length - 1];
});
</script>


<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  padding: 25vw 0;
}

h4 {
  font-size: 4vw;
  padding-top: 12vw;
}
</style>
